<template>
  <div class="donation">
    <div class="head">
      <i class="iconfont head-icon" @click="comeback">&#xe689;</i>
      邀朋友一起捐
    </div>
    <div class="donation-project">
      <div>
        <flexbox>
          <flexbox-item :span="4">
            <div class="item-image">
              <img :src="imageUrl.imageUrl + list.eventPicUrl" alt="">
            </div>
          </flexbox-item>
          <flexbox-item>
            <h3 class="item-title" v-html="list.eventName"></h3>
            <div class="item-mujuan">
              <span>已筹</span><em>{{list.raiseMoney}}</em><span>元</span>
            </div>
          </flexbox-item>
        </flexbox>
      </div>
    </div>
    <div class="donation-style">
       <div class="tishi">
        <p>发起形式</p>
        <ul>
          <li @click="isWitch('geren')">
            <div class=" donation-btn" :class="{'donation-active': isWitch_ == 'geren'}">
              <i v-if="isgeren == true" style="color: #FFFFFF;font-size: 20px" class="iconfont">&#xe62c;</i>
              <i v-else class="iconfont" style="font-size: 20px;color: #999999;">&#xe62c;</i>
              <h5 :class="{'activedText': isWitch_ == 'geren'}">个人</h5>
            </div>
            <!--620-->
          </li>
          <li @click="isWitch('tuanti')">
            <div class="donation-btn" :class="{'donation-active': isWitch_ == 'tuanti'}">
              <i v-if="istuanti" class="iconfont" style="color: #FFFFFF;">&#xe630;</i>
              <i v-else class="iconfont" style="color: #999999;">&#xe630;</i>
              <h5 style="line-height: 13px" :class="{'activedText': isWitch_ == 'tuanti'}">团体</h5>
            </div>
          </li>
          <li @click="isWitch('qiye')">
            <div class=" donation-btn" :class="{'donation-active': isWitch_ == 'qiye'}">
              <i v-if="isqiye" class="iconfont " style="color: #FFFFFF;font-size: 22px;">&#xe9c4;</i>
              <i v-else class="iconfont" style="color: #999999;font-size: 22px;">&#xe9c4;</i>
              <h5 style="line-height: 17px" :class="{'activedText': isWitch_ == 'qiye'}">企业</h5>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="donation-style">
       <div class="tishi">
        <p>发起说明<span @click="textarea = list.content">使用默认范文</span></p>
        <div class="explain">
           <textarea v-model="textarea"></textarea>
        </div>
      </div>
    </div>
    <div class="donation-style">
       <div class="tishi">
        <p>众筹目标</p>
        <div class="money-count">
          <checker
            type="radio"
            style="padding-top: 10px;width: 100%"
            v-model="demo"
            default-item-class="demo5-item"
            selected-item-class="demo5-item-selected"
            :radio-required='true'
            @on-change="checkerWitch()"
          >
            <checker-item v-for="i in ['不设金额', '其它金额']"  :value="i">{{i}}</checker-item>
          </checker>
        </div>
      </div>
    </div>
    <input type="text" v-show="demo == '其它金额'" placeholder="请输入您的目标金额" v-model="goalAmount" style="
    margin-top: 10px;
    border: none;
    border: 1px solid #cccccc;
    height: 30px;
    width: 66%;">
    <div class="donation-foot" @click="goHomedonnation">
        <a>下一步</a>
    </div>
  </div>
</template>
<style lang="scss" src="./index.scss"></style>
<script src="./donation.js"></script>
